<template>
	<view class="myPage">
		<!-- #ifdef MP-WEIXIN -->
		<u-status-bar></u-status-bar>
		<view class="topPad" style="height: 88rpx;"></view>
		<!-- #endif -->
		<view v-if="userInfo.avatar" class="userTrue">
			<view class="info">
				<view class="left">
					<view class="avatar">
						<image :src="userInfo.avatar" mode="scaleToFill"></image>
					</view>
					<view class="xinxi">
						<view class="name">{{userInfo.nickname}}</view>
						<view class="id">ID：{{userInfo.id}}</view>
						<view class="yins">
							<view v-if="userInfo.age || userInfo.gender" class="item1">
								<u-icon v-if="userInfo.gender == 1" name="man" color="#377dff" size="14" bold></u-icon>
								<u-icon v-if="userInfo.gender == 2" name="woman" color="#ff52e8" size="14"
									bold></u-icon>
								<text>{{userInfo.age}}</text>
							</view>
							<view v-if="userInfo.province" class="item2">
								{{userInfo.province +"·"+ userInfo.city}}
							</view>
						</view>
					</view>
				</view>
				<view class="right">
					<view class="item" @click="navigateTo('/pages/my/editUser')">
						<image src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/myicon1.png"
							mode="scaleToFill"></image>
						<text>编辑资料</text>
					</view>
					<view class="item" @click="navigateTo('/pages/my/invite')">
						<image src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/myicon2.png"
							mode="scaleToFill"></image>
						<text>邀请创作者</text>
					</view>
				</view>
			</view>
			<view v-if="userInfo.desc" class="brief">
				{{userInfo.desc}}
			</view>
			<view class="myData">
				<view class="item" @click="navigateTo(`/pages/works/followList?type=1`)">
					<view class="value">{{userInfo.follow_num | million}}</view>
					<view class="key">关注</view>
				</view>
				<view class="item" @click="navigateTo(`/pages/works/followList?type=2`)">
					<view class="value">{{userInfo.fans | million}}</view>
					<view class="key">粉丝</view>
				</view>
				<view class="item">
					<view class="value">{{userInfo.browse_num_count | million}}</view>
					<view class="key">浏览</view>
				</view>
			</view>

			<view class="siglePlan">
				<view class="left">
					每日签到领5个金豆
				</view>
				<view :class="['right',userInfo.is_sign ? 'Sign' : '']" @click="siglePlan">
					{{userInfo.is_sign ? "已签到" : "签到"}}
				</view>
			</view>

			<view class="myassets">
				<view class="title">
					我的资产
				</view>
				<view class="box">
					<view class="item" @click="navigateTo('/pages/my/finance')">
						<view class="value">{{userInfo.total_income || "0.00"}}</view>
						<view class="key">总收益</view>
					</view>
					<view class="xian"></view>
					<view class="item" @click="navigateTo('/pages/my/finance')">
						<view class="value">{{userInfo.money}}</view>
						<view class="key">可提现余额</view>
					</view>
					<view class="xian"></view>
					<view class="item" @click="navigateTo('/pages/my/giftPage')">
						<view class="value">{{userInfo.flower}}</view>
						<view class="key">礼物</view>
					</view>
					<view class="xian"></view>
					<view class="item" @click="navigateTo(`/pages/my/pointsList`)">
						<view class="value" style="color: #FF504A;">{{userInfo.points}}</view>
						<view class="key" style="color: #FF504A;">金豆</view>
					</view>
				</view>
			</view>

			<view class="growUp">
				<view class="title">
					<view class="left">
						成长之路
					</view>
					<view class="right">
						当前奖励：<text>￥{{userInfo.task_reward || "0.00"}}</text>
					</view>
				</view>
				<view class="navtop">
					<scroll-view scroll-x="true" scroll-with-animation class="scroll-tab">
						<view v-for="(v,i) in taskList" :key="v.level" :class="['item', i == selectIndex ? 'xz':'']"
							@click="selectIndex = i">
							<view class="dj">{{"Lv"+ (v.level)}}</view>
							<view class="name">{{ v.level_group_name }}</view>
						</view>
					</scroll-view>
				</view>
				<view class="box-list">
					<view v-for="todo in taskList[selectIndex].level_list" :key="todo.id" class="item">
						<view class="left">
							<image :src="iconList[todo.type-1]" mode="scaleToFill"></image>
							<view class="det">
								<view class="key">{{ todo.title }}</view>
								<view class="val">完成任务可获得{{ todo.reward }}元奖励</view>
							</view>
						</view>
						<view v-if="todo.is_success == 1" class="right">
							<image src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/icon10.png"
								mode="scaleToFill"></image>
							<text>+{{ todo.reward }}</text>
						</view>
						<view v-else class="right1">
							待完成
						</view>
					</view>
					<!-- 		<view class="item">
						<view class="left">
							<image src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/icon12.png"
								mode="scaleToFill"></image>
							<view class="det">
								<view class="key">获得10次播放</view>
								<view class="val">可邀请粉丝朋友一起来完成</view>
							</view>
						</view>
						<view v-if="false" class="right">
							<image src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/icon10.png"
								mode="scaleToFill"></image>
							<text>+10</text>
						</view>
						<view v-else class="right1">
							待完成
						</view>
					</view> -->
				</view>
			</view>
		</view>

		<view v-else class="userFalse">
			<view class="info">
				<view class="avatar">
					<image src="" mode="scaleToFill"></image>
				</view>
				<view class="msg">
					<!-- #ifdef H5 -->
					<view class="name" @click="getUserProfile">登录/注册</view>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<!-- <button class="login" open-type="getPhoneNumber"
						@getphonenumber.stop="getUserProfile">登录/注册</button> -->
					<!-- #endif -->
					<!-- #ifndef H5 -->
					<button class="login" open-type="getPhoneNumber"
						@getphonenumber.stop="getUserProfile">登录/注册</button>
					<!-- #endif -->
					<view class="tis">Hi，欢迎加入体验~</view>
				</view>
			</view>
		</view>

		<view class="Vajra">
			<view class="title">
				精选服务
			</view>
			<view class="Vajra_list">
				<view class="item" v-for="(v,i) in Vajra_list" :key="i" @click="VajraTab(v)">
					<image :src="v.img" mode="scaleToFill"></image>
					<text>{{v.name}}</text>
				</view>
			</view>
		</view>
		<u-popup :show="popShow" mode="center" bgColor="transparent" @close="popShow = false">
			<view class="jdpop">
				<image src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/myicon3.png" mode="scaleToFill"
					@click="popShow = false"></image>
				<input class="inp" placeholder="请输入姓名" border="none" v-model="parameter.title"></input>
				<input class="inp" placeholder="请输入联系方式" border="none" v-model="parameter.title"></input>
				<input class="inp" placeholder="请输入兑换得奖品" border="none" v-model="parameter.title"></input>
				<textarea class="textarea" placeholder="请输入简介" v-model="parameter.title" />
				<view class="btn">
					兑换
				</view>
			</view>
		</u-popup>
		<u-popup :show="popShow2" mode="center" bgColor="transparent" @close="popShow2 = false">
			<view class="jdpopTrue">
				<view class="title">金豆兑换</view>
				<view class="value">您的金豆兑换正在处理中哦，请耐心等待!</view>
				<view class="btn">
					确定
				</view>
			</view>
		</u-popup>
		<u-popup :show="showLoginOut" mode="center" bgColor="transparent" @close="showLoginOut = false">
			<view class="loginOutBox">
				<view class="img"></view>
				<view class="title">退出</view>
				<view class="content">确定要退出登录吗？</view>
				<view class="btns">
					<view class="btn" @click="showLoginOut = false">取消</view>
					<view class="btn active" @click="LogOut()">退出</view>
				</view>
			</view>
		</u-popup>
		<g-tab-bar :select="3"></g-tab-bar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dycode: "",
				showLoginOut: false,
				taskList: [{}],
				selectIndex: 0,
				popShow: false,
				popShow2: false,
				parameter: {},
				backImg: 1,
				userInfo: {},
				iconList: [
					`https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/1.png`,
					`https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/2.png`,
					`https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/3.png`,
					`https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/4.png`
				],
				Vajra_list: [{
						img: "https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/Vajra1/1.png",
						name: "我的作品"
					},
					{
						img: "https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/Vajra1/2.png",
						name: "我的点赞",
						path: "/pages/works/record?work_type=2"
					},
					{
						img: "https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/Vajra1/3.png",
						name: '我的收藏',
						path: "/pages/works/record?work_type=1"
					},
					{
						img: "https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/Vajra1/4.png",
						name: '浏览记录',
						path: "/pages/works/record?work_type=3"
					},
					{
						img: "https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/Vajra1/5.png",
						name: '订阅设置',
						path: "/pages/my/subscribe"
					},
					{
						img: "https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/Vajra1/6.png",
						name: '解锁记录',
						path: "/pages/works/record"
					},
					{
						img: "https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/Vajra1/12.png",
						name: '我的礼物',
						path: "/pages/my/giftPage"
					},
					// {
					// 	img: "https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/Vajra1/7.png",
					// 	name: '平台入驻'
					// },
					// {
					// 	img: "https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/Vajra1/8.png",
					// 	name: '添加到桌面'
					// },
					{
						img: "https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/Vajra1/9.png",
						name: '财务管理',
						path: "/pages/my/finance"
					},
					{
						img: "https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/Vajra1/10.png",
						name: '活动中心',
						path: "/pages/index/activity"
					},
					{
						img: "https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/Vajra1/11.png",
						name: '退出登录'
					}
				]
			}
		},
		onShow() {
			// this.userInfo = uni.getStorageSync("user")
			if (uni.getStorageSync('token')) {
				this.getUserInfo();
				this.getTask();
			}
		},
		onLoad(option) {
			if (option.referee_id) {
				uni.setStorageSync("referee_id", option.referee_id)
				// console.log("测试", uni.getStorageSync('referee_id') || 0)
			}
			// #ifdef MP-TOUTIAO
			uni.login({
				success: (loginRes) => {
					// console.log(loginRes);
					this.dycode = loginRes.code
				}
			});
			// #endif
		},
		methods: {
			//金豆兑换
			exchange() {
				// #ifdef MP-WEIXIN
				this.navigateTo("/pages/my/pointsList")
				// #endif
				// return
				// this.popShow = true
				// this.popShow2 = true

			},
			async getTask() { // 获取新手任务
				let res = await this.$http("api/user/userTask", {}, "GET")
				// console.log("任务结果：", res);
				if (res.code == 200) {
					// uni.setStorageSync("user", res.result);
					// this.userInfo = res.result
					this.taskList = res.result;
				}
			},
			// 签到
			async siglePlan() {
				let res = await this.$http("api/user/siglePlan")
				if (res.code == 200) {
					uni.showToast({
						title: "签到成功",
						icon: 'none'
					})
					this.getUserInfo();
				}
			},
			async getUserProfile(e) {
				// console.log(6688, e);
				if (this.userInfo.nickname) return
				let that = this
				// #ifdef H5
				that.navigateTo("/pages/login/login")
				// #endif
				// #ifdef MP-TOUTIAO
				// console.log("tt", e);
				if (e.detail.errMsg === "getPhoneNumber:ok") {
					// 获取到加密的手机号信息
					const encryptedData = e.detail.encryptedData;
					const iv = e.detail.iv;

					// 将 encryptedData 和 iv 发送到服务器解密
					let data = await that.$http("api/user/xcxLogin", {
						code: that.dycode,
						encryptedData: encryptedData,
						iv: iv,
						avatar: "https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/logo.jpg",
						nickname: `嫦月${Math.floor(Math.random() * 100000) + 1}`,
						referee_id: uni.getStorageSync('referee_id') || 0,
						type: 1,
					})
					if (data.code == 200) {
						uni.setStorageSync("token", data.result.token);
						if (data.code == 200) {
							uni.showToast({
								title: "登录成功",
								icon: 'none'
							})
							that.getUserInfo()
							that.getTask();
							// setTimeout(() => {
							// 	uni.reLaunch({
							// 		url: "/pages/index/index"
							// 	});
							// }, 1000)
						}
					}
				} else {
					// 用户拒绝授权或其他错误
					uni.showToast({
						title: '获取手机号失败',
						icon: 'none'
					});
				}
				// uni.getUserProfile({
				// 	success(user) {
				// 		// console.log("getUserProfile 调用成功：", user);
				// 		uni.login({
				// 			success: async (res) => {
				// 				const data = await that.$http("api/user/xcxLogin", {
				// 					code: res.code,
				// 					avatar: user.userInfo.avatarUrl,
				// 					nickname: user.userInfo.nickName,
				// 					referee_id: uni.getStorageSync('referee_id') || 0,
				// 					type: 1,
				// 				})
				// 				if (data.code == 200) {
				// 					uni.setStorageSync("token", data.result.token);
				// 					if (data.code == 200) {
				// 						uni.showToast({
				// 							title: "登录成功",
				// 							icon: 'none'
				// 						})
				// 						that.getUserInfo()
				// 						that.getTask();
				// 						// setTimeout(() => {
				// 						// 	uni.reLaunch({
				// 						// 		url: "/pages/index/index"
				// 						// 	});
				// 						// }, 1000)
				// 					}
				// 				}
				// 			}
				// 		});
				// 	},
				// 	fail(err) {
				// 		console.log(err);
				// 	}
				// })
				// #endif
				// #ifdef MP-WEIXIN
				if (e.detail.code) {
					uni.login({
						success: async (res) => {
							// console.log(res);
							let data = await that.$http("api/user/xcxLogin", {
								code: res.code,
								phone_code: e.detail.code,
								avatar: "https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/logo.jpg",
								nickname: `嫦月${Math.floor(Math.random() * 100000) + 1}`,
								referee_id: uni.getStorageSync('referee_id') || 0,
								type: 2,
							})
							if (data.code == 200) {
								uni.setStorageSync("token", data.result.token);
								if (data.code == 200) {
									uni.showToast({
										title: "登录成功",
										icon: 'none'
									})
									that.getUserInfo()
									that.getTask();
									// setTimeout(() => {
									// 	uni.reLaunch({
									// 		url: "/pages/index/index"
									// 	});
									// }, 1000)
								}
							}
						}
					});
				}
				// #endif
			},
			VajraTab(data) {
				// console.log(data);
				if (data.name == "退出登录") {
					this.showLoginOut = true;
				} else if (data.name == "我的作品") {
					uni.switchTab({
						url: '/pages/works/works'
					})
				} else {
					this.navigateTo(data.path)
				}
			},
			async getUserInfo() {
				let res = await this.$http("api/user/getUserInfo", {}, "GET")
				// console.log(res);
				if (res.code == 200) {
					uni.setStorageSync("user", res.result);
					this.userInfo = res.result
				}
			},
			LogOut() {
				getApp().globalData.WorkList = []
				uni.removeStorageSync('user')
				uni.removeStorageSync('token')
				this.userInfo = {};
				this.showLoginOut = false;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F8FAF7;
	}

	.myPage {
		// width: 100%;
		min-height: 100vh;
		padding: 0 32rpx 200rpx;
		background: url("https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/myBack.png") no-repeat;
		background-size: 498rpx auto;

		.userTrue {
			padding-top: 16rpx;

			.info {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					display: flex;
					align-items: center;

					.avatar {
						display: flex;
						justify-content: center;
						width: 84rpx;
						height: 100rpx;
						background: url("https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/icon8.png") no-repeat;
						background-size: 100% 100%;
						padding: 26rpx 8rpx 0;
						box-sizing: border-box;
						margin-right: 24rpx;

						image {
							width: 68rpx;
							height: 68rpx;
							border-radius: 50%;
						}
					}

					.xinxi {
						.name {
							font-weight: bold;
							font-size: 36rpx;
							color: #333333;
						}

						.id {
							font-weight: 500;
							font-size: 24rpx;
							color: #333333;
							padding: 8rpx 0;
						}

						.yins {
							display: flex;
							align-items: center;

							.item1 {
								display: flex;
								align-items: center;
								justify-content: center;
								// width: 92rpx;
								height: 32rpx;
								padding: 0 10rpx;
								background: #FFFFFF;
								border-radius: 4rpx 4rpx 4rpx 4rpx;
								margin-right: 12rpx;

								text {
									font-weight: bold;
									font-size: 20rpx;
									color: #333333;
								}
							}

							.item2 {
								height: 32rpx;
								padding: 0 10rpx;
								background: #FFFFFF;
								border-radius: 4rpx 4rpx 4rpx 4rpx;
								font-weight: bold;
								font-size: 20rpx;
								color: #333333;
								line-height: 32rpx;
								text-align: center;
							}
						}
					}
				}

				.right {
					display: flex;
					align-items: center;

					.item {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						margin-left: 16rpx;

						image {
							width: 36rpx;
							height: 36rpx;
						}

						text {
							font-weight: 500;
							font-size: 20rpx;
							color: #333333;
							padding-top: 4rpx;
						}
					}
				}
			}

			.brief {
				font-weight: 500;
				font-size: 24rpx;
				color: #333333;
				line-height: 32rpx;
				padding: 24rpx 0;
			}

			.myData {
				display: flex;
				align-items: center;
				justify-content: space-around;
				margin: 24rpx 0;

				.item {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.value {
						font-weight: bold;
						font-size: 32rpx;
						color: #333333;
					}

					.key {
						padding-top: 8rpx;
						font-weight: 500;
						font-size: 20rpx;
						color: #8D8F90;
					}
				}
			}

			.siglePlan {
				display: flex;
				align-items: center;
				justify-content: space-between;
				// width: 686rpx;
				height: 100rpx;
				background: url("https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/siglePlan.png") no-repeat;
				background-size: 100% 100%;
				margin-bottom: 24rpx;
				padding: 0 24rpx 0 96rpx;
				box-sizing: border-box;

				.left {
					font-weight: bold;
					font-size: 28rpx;
					color: #979217;
				}

				.right {
					width: 128rpx;
					height: 56rpx;
					line-height: 56rpx;
					background: #FFFFFF;
					border-radius: 30rpx 30rpx 30rpx 30rpx;
					text-align: center;
					font-weight: bold;
					font-size: 24rpx;
					color: #979217;
				}

				.Sign {
					color: #FFFFFF;
					background: #979217;
				}
			}

			.myassets {
				// width: 686rpx;
				height: 200rpx;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				margin-bottom: 24rpx;

				.title {
					font-weight: 800;
					font-size: 32rpx;
					color: #333333;
					padding: 28rpx;
				}

				.box {
					display: flex;
					align-items: center;

					.item {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						flex: 1;

						.value {
							font-weight: bold;
							font-size: 32rpx;
							color: #333333;
						}

						.key {
							padding-top: 4rpx;
							font-weight: 500;
							font-size: 20rpx;
							color: #8D8F90;
						}
					}

					.xian {
						width: 0rpx;
						height: 40rpx;
						border-radius: 0rpx 0rpx 0rpx 0rpx;
						border: 2rpx solid rgba(202, 202, 202, 0.3);
					}
				}
			}

			.growUp {
				// width: 686rpx;
				// height: 468rpx;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				padding: 0 24rpx 24rpx;

				.title {
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 98rpx;

					.left {
						font-weight: 800;
						font-size: 32rpx;
						color: #333333;
					}

					.right {
						display: flex;
						align-items: center;
						font-weight: 500;
						font-size: 20rpx;
						color: #8D8F90;

						text {
							font-weight: bold;
							font-size: 32rpx;
							color: #FF504A;
						}
					}
				}

				.navtop {
					.scroll-tab {
						display: flex;
						white-space: nowrap;

						.item {
							display: inline-flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;
							width: 216rpx;
							height: 126rpx;

							.dj {
								font-weight: bold;
								font-size: 32rpx;
								color: #333333;
							}

							.name {
								padding-top: 8rpx;
								font-weight: 500;
								font-size: 28rpx;
								color: #333333;
							}
						}

						.xz {
							background-color: #f6f6f6;
							border-radius: 16rpx 16rpx 0 0;
						}
					}

				}

				.box-list {
					display: flex;
					flex-direction: column;
					flex: 1;
					padding: 15rpx 16rpx;
					background-color: #f6f6f6;
					border-radius: 0 0 16rpx 16rpx;

					.item {
						display: flex;
						align-items: center;
						justify-content: space-between;
						flex: 1;
						padding: 20rpx 0;

						.left {
							display: flex;
							align-items: center;

							image {
								width: 56rpx;
								height: 56rpx;
							}

							.det {
								padding-left: 12rpx;

								.key {
									font-weight: bold;
									font-size: 28rpx;
									color: #333333;
									padding-bottom: 8rpx;
								}

								.val {
									font-weight: 500;
									font-size: 24rpx;
									color: #CACACA;
								}
							}
						}

						.right {
							display: flex;
							align-items: center;
							justify-content: center;
							width: 120rpx;
							height: 56rpx;
							background: rgba(255, 80, 74, 0.07);
							border-radius: 140rpx 140rpx 140rpx 140rpx;

							image {
								width: 32rpx;
								height: 32rpx;
							}

							text {
								font-weight: bold;
								font-size: 20rpx;
								color: #FF504A;
								padding-left: 4rpx;
							}
						}

						.right1 {
							width: 120rpx;
							height: 56rpx;
							border-radius: 104rpx 104rpx 104rpx 104rpx;
							border: 2rpx solid #CACACA;
							box-sizing: border-box;
							font-weight: 500;
							font-size: 20rpx;
							color: #8D8F90;
							line-height: 56rpx;
							text-align: center;
						}
					}
				}
			}
		}

		.userFalse {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-top: 16rpx;

			.info {
				display: flex;
				align-items: center;

				.avatar {
					width: 84rpx;
					height: 100rpx;
					background: url("https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/icon8.png") no-repeat;
					background-size: 100% 100%;
					padding: 26rpx 8rpx 0;
					box-sizing: border-box;
					margin-right: 24rpx;

					image {
						width: 68rpx;
						height: 68rpx;
						border-radius: 50%;
					}
				}

				.msg {
					display: flex;
					flex-direction: column;
					justify-content: center;
					// height: 100rpx;
					padding-top: 14rpx;

					.name {
						font-weight: bold;
						font-size: 36rpx;
						color: #333333;
						line-height: 42rpx;
					}

					::v-deep button {
						background: none;
						padding: 0;
						text-align: left;
						margin: 0;
						font-weight: bold;
						font-size: 36rpx;
						color: #333333;
						line-height: 42rpx;
					}

					::v-deep button::after {
						content: none;
					}

					.tis {
						font-weight: 500;
						font-size: 24rpx;
						color: #8D8F90;
						line-height: 28rpx;
						padding-top: 4rpx;
					}
				}
			}
		}

		.Vajra {
			// width: 686rpx;
			// height: 436rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			margin-top: 28rpx;

			.title {
				font-weight: 800;
				font-size: 32rpx;
				color: #333333;
				padding: 28rpx 0 0 28rpx;
			}

			.Vajra_list {
				display: flex;
				flex-wrap: wrap;
				padding-bottom: 32rpx;

				.item {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					padding-top: 36rpx;
					width: 25%;

					image {
						width: 36rpx;
						height: 36rpx;
					}

					text {
						padding-top: 12rpx;
						font-weight: 500;
						font-size: 24rpx;
						color: #333333;
					}
				}
			}
		}

		.jdpop {
			position: relative;
			width: 686rpx;
			height: 938rpx;
			background: url("https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/myPop.png") no-repeat;
			background-size: 100% 100%;
			padding: 214rpx 40rpx 0;
			box-sizing: border-box;

			image {
				position: absolute;
				right: 28rpx;
				top: 118rpx;
				width: 48rpx;
				height: 48rpx;
			}

			.inp {
				width: 606rpx;
				height: 96rpx;
				background: #F2F2F2;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				font-size: 28rpx;
				font-weight: bold;
				padding: 32rpx;
				box-sizing: border-box;
				margin-bottom: 16rpx;

				.input-placeholder {
					font-size: 28rpx;
					color: #CACACA;
					font-weight: bold;
				}
			}

			.textarea {
				width: 606rpx;
				height: 180rpx;
				background: #F2F2F2;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				font-weight: bold;
				font-size: 28rpx;
				padding: 32rpx;
				box-sizing: border-box;

				.uni-textarea-placeholder {
					font-weight: bold;
					font-size: 28rpx;
					color: #CACACA;
				}
			}

			.btn {
				width: 606rpx;
				height: 96rpx;
				background: #D1FF23;
				border-radius: 102rpx 102rpx 102rpx 102rpx;
				line-height: 96rpx;
				text-align: center;
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
				margin-top: 64rpx;
			}
		}

		.jdpopTrue {
			width: 420rpx;
			height: 300rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			padding: 32rpx 38rpx 0;
			box-sizing: border-box;

			.title {
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
				text-align: center;
			}

			.value {
				font-weight: 500;
				font-size: 24rpx;
				color: #333333;
				padding: 40rpx 0 48rpx 0;
			}

			.btn {
				width: 208rpx;
				height: 52rpx;
				background: #333333;
				border-radius: 102rpx 102rpx 102rpx 102rpx;
				margin: auto;
				line-height: 52rpx;
				text-align: center;
				font-weight: bold;
				font-size: 24rpx;
				color: #FFFFFF;
			}
		}
	}

	.loginOutBox {
		width: 420rpx;
		height: 340rpx;
		background: #fff;
		border-radius: 24rpx;
		overflow: hidden;
		text-align: center;

		.img {
			width: 92rpx;
			height: 92rpx;
			background: rgba(255, 80, 74, 0.1);
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 32rpx auto;
			border-radius: 92rpx;
		}

		.img:before {
			content: "";
			display: block;
			width: 36rpx;
			height: 36rpx;
			background: url(https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/loginOut.png);
			background-size: 100% 100%;
		}

		.title {
			font-size: 28rpx;
			color: #333;
			font-weight: bold;
			line-height: 32rpx;
		}

		.content {
			color: #8D8F90;
			font-size: 24rpx;
			line-height: 28rpx;
			margin: 8rpx 0 32rpx;
		}

		.btns {
			display: flex;
			justify-content: center;

			.btn {
				width: 168rpx;
				height: 52rpx;
				background: #F8F8F8;
				border-radius: 8rpx;
				text-align: center;
				line-height: 52rpx;
				margin: 0 12rpx;
				font-size: 24rpx;
			}

			.active {
				background: #FF504A;
				color: #fff;
			}
		}
	}
</style>